<template>
	<view class="charge-station-box">
		
				<u-button type="primary" text="确定"></u-button>
				<u-button type="primary" :plain="true" text="镂空"></u-button>
				<u-button type="primary" :plain="true" :hairline="true" text="细边"></u-button>
				<u-button type="primary" :disabled="disabled" text="禁用"></u-button>
				<u-button type="primary" loading loadingText="加载中"></u-button>
				<u-button type="primary" icon="map" text="图标按钮"></u-button>
				<u-button type="primary" shape="circle" text="按钮形状"></u-button>
				<u-button text="渐变色按钮" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
				<u-button type="primary" size="small" text="大小尺寸"></u-button>
		<view v-if="countList.length" class="content-box">
			<scroll-view  
			   scroll-y="true" 
			   class="scroll-view" 
			   scroll-with-animation="true" 
			   @scrolltolower="scrollDown"
			   refresher-enabled="true" 
			   :refresher-triggered="triggered"
			   @refresherrefresh="onRefresh">   
				<view class="list-item"
					   v-for="(item,index) in  countList" 
					   :key="index" 
					   :class="{active:orderIndex==index}"
					   @click="goEquipmentDetail(item)">
					<image src="../../static/iconHome2.png" class="pile-type" v-if="item.ownerMemberId === item.memberId"></image>
					<image src="../../static/iconHome1.png" class="pile-type" v-else></image>
					<view class="list-info">
						<view class="text1">{{item.socketName}}</view>
						<view class="text2">设备编号 {{item.equipmentCode}}</view>
						<view class="text3" v-if="item.shareCount && item.shareCount !== '0'">
							<image src="../../static/iconShare2.png" class="icon"></image>
							<text>已共享给{{item.shareCount}}人</text>
						</view>
						<view class="text4" v-if="item.ownerMemberId !== item.memberId">
							<image src="../../static/iconShare1.png" class="icon"></image>
							<text>来自{{item.name}}的共享</text>
						</view>
					</view>
					<view class="list-btn-group" 
					    v-if="item.ownerMemberId === item.memberId" 
						:class="{'margin-top': !item.shareCount || item.shareCount === '0'}">
						<view class="btn" @click.stop="goSharePage(item)">共享给他人</view>
						<view class="btn btn-margin" @click.stop="editChargingPile(item)">编辑充电桩</view>
						<view class="btn" @click.stop="deleteChargingPile(item)">删除充电桩</view>
					</view>
					<view>
						<view class="book-status" v-if="item.scheduleJson">预约中</view>
						<view v-else class="pile-status" 
							:style="{
								backgroundColor: socketStatusEnum[item.socketStatus].background,
								color: socketStatusEnum[item.socketStatus].color,
							}">
							<image alt="" src="../../static/iconCharge.png" class="img" v-if="item.socketStatus === 'CHARGING'"></image>
							<view :class="{'line-height': item.socketStatus !== 'CHARGING'}">{{socketStatusEnum[item.socketStatus].text}}</view>
						</view>
					</view>
				</view>
				<view class="load-text">{{loadText}}</view>
			</scroll-view>
		</view>
		<view v-else class="empty-box">
			<view><image alt="" src="../../static/emptyData.png" class="empty-img"></image></view>
			<view>暂无充电桩</view>
			<view class="empty-add-btn" @click="addChargingPile">添加充电桩</view>
		</view>
		<Footer :selected="selected"/>
		<u-modal
		    :show="showModal" 
			:content='content'
			@confirm="onConfirm" 
			@cancel="onCancel" 
			showCancelButton="true" 
			cancelText="取消" 
			title="提示" 
		></u-modal>
		<view style="text-align: center;">
			<u-modal
			    :show="showMsg" 
				content='车辆正在充电中，请停充后重试'
				@confirm="onConfirmMsg" 
				title="提示" 
			></u-modal>
		</view>
	</view>
</template>

<script>
	import Footer from '../component/footer/index.vue'
	import { listPage, unbind } from './indexServ.js'
	
	export default {
		name: 'template',
		components: { Footer },
		data() {
			return {
				socketCode: '',
				loadText: '',
				finished: false,
				pageIndex: 1,
				pageSize: 20,
				socketStatusEnum: {
					OFFLINE: { text: '离线', color: '#666666', background: '#F5F5F5' },
					FAULT: { text: '故障', color: '#FF4242', background: '#FFEDED' },
					IDLE: { text: '空闲', color: '#09AB7A', background: '#E6FFF2' },
					CHARGING: { text: '充电中', color: '#FFFFFF', background: '#15D193' },
					ONLY_CONNECTED: { text: '已插枪', color: '#09AB7A', background: '#E6FFF2' }
				},
				showModal: false,
				content: '',
				selected: 0,
				countList: [],
				showMsg: false,
				triggered: false
			}
		},
		onLoad() {
		},
		onShow() {
			this.initLoad()
		},
		methods: {
			initLoad() {
				this.finished = false
				this.pageIndex = 1
				this.getData()
			},
			onRefresh() {
				this.triggered = true
				this.initLoad()
			},
			scrollDown(e) {
				if (this.finished) {
					this.loadText = '已经到底了!'
				} else {
					this.getData()
				}
			},
			async getData() {
				uni.showLoading({
					mask: true,
					title: '加载中...'
				})
				await listPage({pageSize: this.pageSize, pageIndex: this.pageIndex}).then((res) => {
					uni.hideLoading()
					const { code, body, message } = res
					if (code === '0000000') {
						this.triggered = false
						this.pageIndex++
						if (body.currentPage === '1') {
						    this.countList = body.records
						} else {
						    this.countList.push(...body.records)
						}
						if (parseInt(body.currentPage) >= parseInt(body.totalPage)) {
						    this.finished = true
						}
					} else if (code !== 'B000401') {
						this.$u.toast(message)
					}
				}).catch(() => {
					this.$u.toast('接口返回异常')
				})
			},
			// 充电桩详情
			goEquipmentDetail(item) {
				uni.navigateTo({
					url: `/pages/chargeList/chargeDetail/index?socketCode=${item.socketCode}`,
					fail: error => {
						console.log('error；', error)
					}
				})
			},
			// 共享
			goSharePage(item) {
				uni.navigateTo({
					url: `/pages/chargeList/shareCharge/index?socketCode=${item.socketCode}`,
					fail: error => {
						console.log('error；', error)
					}
				})
			},
			// 添加充电桩
			addChargingPile() {
				uni.navigateTo({
					url: `/pages/chargeList/addEditCharge/index`,
					fail: error => {
						console.log('error；', error)
					}
				})
			},
			// 编辑充电桩
			editChargingPile(item) {
				uni.navigateTo({
					url: `/pages/chargeList/addEditCharge/index?socketCode=${item.socketCode}`,
					fail: error => {
						console.log('error；', error)
					}
				})
			},
			// 删除充电桩
			deleteChargingPile(item) {
				// 充电中时，禁止删除
				if (item.socketStatus === 'CHARGING') {
					this.showMsg = true
					return
				}
				this.socketCode = item.socketCode
				if (item.scheduleJson) {
					this.content = '温馨提示，删除后将同时取消桩上的共享与预约'
				} else {
				    this.content = '您是否要删除此充电桩？此操作不可撤回'
				}
				this.showModal = true
			},
			async onConfirm() {
				await unbind({socketCode: this.socketCode}).then((res) => {
					const { code, message } = res
					if (code === '0000000') {
						this.showModal = false
						this.$u.toast('删除成功')
						this.pageIndex = 1
						this.getData()
						return
					}
					this.$u.toast(message)
				}).catch(() => {
					this.$u.toast('接口返回异常')
				})
			},
			onCancel() {
				this.showModal = false
			},
			onConfirmMsg() {
				this.showMsg = false
			}
		}
	}
</script>

<style  lang="scss" scoped>
	.charge-station-box {
		/* scroll-view 样式 */
		.scroll-view {
			width: 100%;
			height: calc(100vh - 50rpx * 2);
			overflow:scroll
		}
		.content-box {
			.list-item {
				background: #fff;
				border-radius: 8rpx * 2;
				margin: 12rpx * 2;
				padding: 17rpx * 2 12rpx * 2 16rpx * 2 12rpx * 2;
				position: relative;
				.pile-type {
					width: 32rpx * 2;
					height: 32rpx * 2;
					position: absolute;
					top: 23rpx * 2;
				}
				.list-info {
					margin-left: 40rpx * 2;
					.text1 {
						font-size: 16rpx * 2;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
					}
					.text2 {
						font-size: 14rpx * 2;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						margin-top:4rpx * 2;
					}
					.text3 {
						background: #FFF4E8;
						border-radius: 4rpx * 2;
						font-size: 14rpx * 2;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #CC7C14;
						height: 20rpx * 2;
						line-height: 20rpx * 2;
						margin: 12rpx * 2 0 16rpx * 2 0;
						display: inline-block;
						padding-right: 6rpx * 2;
						.icon {
							width: 16rpx * 2;
							height: 16rpx * 2;
							margin:0 6rpx * 2;
							top: 3rpx * 2;
							position: relative;
						}
					}
					.text4 {
						background: #E6F2FD;
						border-radius: 4rpx * 2;
						font-size: 14rpx * 2;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #0987F5;
						height: 20rpx * 2;
						line-height: 20rpx * 2;
						margin-top: 18rpx * 2;
						display: inline-block;
						padding-right: 6rpx * 2;
						.icon {
							width: 16rpx * 2;
							height: 16rpx * 2;
							margin:0 6rpx * 2;
							top: 3rpx * 2;
							position: relative;
						}
					}
				}
			    .list-btn-group {
				   	margin-left:29rpx * 2;
					display: flex;
					.btn {
						padding: 8rpx * 2 0;
						font-size: 14rpx * 2;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #0A1B29;
						line-height: 20rpx * 2;
						border-radius: 18rpx * 2;
						border: 1rpx * 2 solid #DFE3E7;
						flex: 1;
						text-align: center;
					}
					.btn-margin {
						margin: 0 8rpx * 2;
					}
				}
			    .pile-status {
					position: absolute;
					top: 16rpx * 2;
					right: 12rpx * 2;
					width: 52rpx * 2;
					height: 52rpx * 2;
					text-align: center;
					font-size: 12rpx * 2;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					border-radius: 50%;
					.img {
						width: 16rpx * 2;
						height: 16rpx * 2;
						margin-top: 5rpx * 2;
					}
					.line-height {
						line-height: 52rpx * 2;
					}
				}
				.book-status {
					position: absolute;
					top: 16rpx * 2;
					right: 16rpx * 2;
					width: 52rpx * 2;
					height: 52rpx * 2;
					line-height: 52rpx * 2;
					text-align: center;
					font-size: 12rpx * 2;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					border-radius: 50%;
					background:#E6F2FD;
					color:#0987F5;
				}
			    .margin-top {
					margin-top: 25rpx * 2;
				}
			}
		    .load-text {
				text-align: center;
				color: #ccc;
				padding-bottom: 70rpx * 2;
			}
		}
		.empty-box {
			display: flex;
			text-align: center;
			flex-direction: column;
			justify-content: center;
			height: 100vh;
			align-items: center;
			margin-top: -50rpx *2;
			.empty-img {
				width: 160rpx * 2;
				height: 160rpx * 2;
				margin-bottom: 12rpx * 2;
			}
			.empty-add-btn {
				width: 200rpx * 2;
				height: 52rpx * 2;
				line-height: 52rpx * 2;
				background: #1A8DFF;
				border-radius: 26rpx * 2;
				font-size: 18rpx * 2;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin: 20rpx * 2 auto 0 auto;
			}
		} 
	}
</style>